.list-header {
  background: $light-grey;
  border: 1px solid darken($light-grey, 7%);
  color: $grey;
  display: flex;
  justify-content: space-between;
  padding: $s-size $m-size;
}

.list-body {
  margin-bottom: $m-size;
  @media (min-width: $desktop-breakpoint) {
    margin-bottom: $l-size;
  }
}

.list-item {
  display: flex;
  flex-direction: column;
  border: 1px solid darken($light-grey, 7%);
  border-top: none;
  color: $dark-grey;
  padding: $s-size;
  text-decoration: none;
  transition: background .3s ease;
  &:hover {
    background: $light-grey;
  }
  @media (min-width: $desktop-breakpoint) {
    flex-direction: row;
    justify-content: space-between;
    padding: $m-size;
    align-items: center;
  }
}

.list-item--message {
  align-items: center;
  justify-content: center;
  color: $grey;
  padding: $m-size;
  &:hover {
    background: none;
  }
}

.list-item__title {
  margin: 0;
  word-break: break-all;
}

.list-item__subtitle {
  color: $grey;
  font-size: $font-size-small;
}

.list-item__data {
  margin: $s-size 0 0 0;
  @media (min-width: $desktop-breakpoint) {
    margin: 0;
    padding-left: $s-size;
  }
}